<template>
  <transition appear appear-active-class="fadeInTranslateX">
    <div class="card">
      <div>
        <img :src="avatar" alt="" width="60px" height="60px" />
      </div>
      <i class="iconfont iconxingmingyonghumingnicheng"></i>
      <div>
        {{ realname }}
      </div>
      <i class="iconfont iconqqfuben"></i>
      <div>2628735401</div>
      <i class="iconfont icongithub1"></i>
      <div>
        <a href="https://gitee.com/xiao_tigers" target="_blank"
          >https://gitee.com/xiao_tigers</a
        >
      </div>
      <i class="iconfont iconFont_Linear"></i>
      <div>
        所谓焦虑，就是无方向，无目的，无结果的把宝贵的心智能量消耗在毫无战略性可言的机会上
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import $axios from "@/http";
const avatar = ref<string>("");
const realname = ref<string>("");
onMounted(() => {
  $axios.get("/user/manager").then((res) => {
    console.log(res);
    if (res.data.error === -1) {
      avatar.value = res.data.data.avatar;
      realname.value = res.data.data.realname;
    }
  });
});
</script>

<style scoped lang="scss">
@import url("../../css/comment/animate.css");
.card {
  color: #303133;
  box-sizing: border-box;
  padding: 30px 20px;
  width: 20%;
  height: 400px;
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(155, 255, 255, 0));
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 1%;
  img {
    border-radius: 50%;
  }
  div {
    margin-bottom: 10px;
  }
}
</style>
